import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity,
	Image, PixelRatio, ScrollView
} from "react-native";
import { API, API_GENERATE } from '../../../../config/api';
import HTTP from '../../../../utils/http';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import { InputModel } from './_component/InputModel';
import { DelayModel } from './_component/DelayModel';
import MethodUtil from '../../../../utils/MethodUtil';
import ToastUtil from '../../../../utils/toast';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';

const scale = GLOBAL.SCALE;


export class JudgementDetailsPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '授信逾期评判详情',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);

		this.state = {
			inputModelShow: false,
			loading: true
		}

		this._closeModel = this._closeModel.bind(this);
		this._submit = this._submit.bind(this);
		this.inputModelData = {
			visible: false,
			submitText: '确认逾期',
			titleText: '逾期原因',
			tipText: '',
			btnPress: () => { },
			closePress: () => { }
		};
		this.delayModelData = {
			visible: false,
			btnPress: () => { },
			closePress: () => { }
		};
	}

	_closeModel () {
		const { inputModelShow } = this.state;
		this.inputModelData.visible = false;
		this.delayModelData.visible = false;
		this.setState({
			inputModelShow: !inputModelShow,
		})
	}

	_showModel (data) {
		const { overdueStatus } = data;
		const { inputModelShow } = this.state;
		this.setState({
			actionData: data
		})
		/**
		 * 0:延期
		 * 1:逾期
		 * 2:关闭
		 */
		if (overdueStatus === '0') {
			this.delayModelData.visible = true;
			this.delayModelData.data = data;
			this.delayModelData.closePress = () => { this._closeModel() };
			this.delayModelData.btnPress = (day) => {
				this.delayModelData.visible = false;
				this.setState({
					inputModelShow: !inputModelShow,
				})
				this._submit(day);
			}
		} else {
			this.inputModelData.visible = true;
			this.inputModelData.titleText = overdueStatus === '1' ? '逾期原因' : '关闭原因';
			this.inputModelData.tipText = overdueStatus === '1' ? '' : '（关闭后无法修改，请谨慎操作）';
			this.inputModelData.submitText = overdueStatus === '1' ? '确认逾期' : '确认关闭';
			this.inputModelData.closePress = () => { this._closeModel() };
			this.inputModelData.btnPress = (remark) => {
				this._submit(remark);
			}
		}
	}

	async _submit (value) {
		const { actionData, inputModelShow } = this.state;
		const { overdueStatus, overdueId, checkDay, companyId } = actionData || {};
		this.inputModelData.visible = false;
		this.delayModelData.visible = false;
		if (overdueStatus === '0' && !value) {
			ToastUtil.showWarning('延期请输入延期天数');
		}
		console.log(123, value);
		this.setState({ inputModelShow: !inputModelShow });
		let responseData = await HTTP.POST(API_GENERATE(API.CREDIT_OVERDUE_DECIDE), {
			remark: overdueStatus === '0' ? 'APP操作延期' : value,
			overdueId,
			overdueStatus,
			companyId,
			reason: '7',
			checkDay: overdueStatus === '0' ? value : '',
		});
		if (responseData) {
			this.getDetail();
		}
	}

	async getDetail () {
		const overdueId = this.props.navigation.state.params;
		const detail = await HTTP.POST(API_GENERATE(API.CREDIT_OVERDUE_DETAIL), overdueId);
		this.setState({
			loading: false
		})
		if (detail) {
			this.setState({
				detail,
				status: 'data'
			})
		} else {

		}
	}

	componentWillMount () {
		this.getDetail();
	}

	componentWillUnmount () {

	}

	render () {
		const { choice } = this.props.navigation.state.params;
		const { detail } = this.state;
		const { overdueId, orderId, companyName, companyId, nextCheckTime, staffIdName, bizTeamName, organName, isOverdueName, overdueAmount, modify,
			overdueDay, sourceDate, overdueDate, overdueStatus, checkDay, sourceCode, hisCreditOverdueList, accountDay, sourceTypeName, expireDays } = detail || {};
		return (
			<ScrollView style={styles.container}>
				<View style={styles.listBox}>
					<View style={styles.listHead}>
						<View style={{ flexDirection: 'row', alignItems: 'center', marginRight: 12 * scale }}>
							<Text style={styles.title}>{orderId || '-'}</Text>
							{overdueStatus === '0' ? <Text style={styles.btnRed}>{nextCheckTime && nextCheckTime.substring(0, 10) || '-'} 重新计算</Text> : null}
							<Text style={styles.btn}>{(isOverdueName || '') + (overdueStatus === '0' ? (' | ' + checkDay + '天') : '')}</Text>
						</View>
						<Text style={styles.info}>{companyName || '-'}丨{staffIdName || '-'}</Text>
						<Text style={{ fontSize: 10 * scale, paddingLeft: 12 * scale, paddingTop: 5 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
					</View>
					<View style={styles.itemList}>
						<View style={styles.timeBock}>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>占用日期</Text>
								<Text style={styles.timeDown}>{sourceDate && sourceDate.substring(0, 10) || '-'}</Text>
							</View>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>到期日</Text>
								<Text style={styles.timeDown}>{overdueDate && overdueDate.substring(0, 10) || '-'}</Text>
							</View>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>逾期天数</Text>
								<Text style={styles.timeDown}>{overdueDay || '-'}</Text>
							</View>
						</View>
						<View style={styles.timeBock}>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>逾期金额</Text>
								<Text style={styles.timeDown}>￥{MethodUtil.toThousands(overdueAmount, 2) || '-'}</Text>
							</View>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>合同期限</Text>
								<Text style={styles.timeDown}>{expireDays || '-'}</Text>
							</View>
							<View style={styles.timeBox}>
								<Text style={styles.timeHead}>账期</Text>
								<Text style={styles.timeDown}>{accountDay || '-'}</Text>
							</View>
						</View>
						<View style={styles.timeBock}>
							<View style={[styles.timeBox, { width: 270 * scale }]}>
								<Text style={styles.timeHead}>依据凭单</Text>
								<Text style={styles.timeDown}>{sourceTypeName || ''}</Text>
								<Text style={styles.timeDown}>{sourceCode || '-'}</Text>
							</View>
						</View>
						<View style={styles.timeBock}>
							<View style={[styles.timeBox, { width: 3000 * scale }]}>
								<Text style={styles.timeHead}>业务员</Text>
								<Text style={[styles.timeHead, { marginTop: 4 * scale }]}>{staffIdName || '--'} | {bizTeamName || '--'} | {organName || '--'}</Text>
							</View>
						</View>
						{
							modify ?
								<View style={styles.btnContainer}>
									<TouchableOpacity style={[styles.actionBtn, { backgroundColor: overdueStatus !== '1' ? '#cee5ff' : style.color.themeColor }]}
										onPress={() => {
											this._showModel({ overdueStatus: overdueStatus !== '1' ? '1' : '0', overdueId, checkDay, companyId, overdueDay }); 	//已逾期->可操作延期、关闭 已延期->可操作逾期、关闭 已关闭->可操作逾期
										}}>
										<Text style={[styles.actionBtnText, { color: overdueStatus !== '1' ? style.color.themeColor : '#fff' }]}>
											{overdueStatus !== '1' ? '逾期' : '延期'}
										</Text>
									</TouchableOpacity>
									{
										overdueStatus !== '2' ?
											<TouchableOpacity style={styles.closeBtn} onPress={() => {
												this._showModel({ overdueStatus: '2', overdueId, checkDay, companyId, overdueDay });
											}}>
												<Text style={styles.closeText}>关闭</Text>
											</TouchableOpacity> : null
									}
								</View>
								: null
						}
					</View>
				</View>

				<DelayModel {...this.delayModelData} />
				<InputModel {...this.inputModelData} />

				<View style={styles.stepBox}>
					<Text style={styles.stepTitle}>操作记录</Text>
					<View style={styles.stepList}>
						{
							hisCreditOverdueList && hisCreditOverdueList.length ?
								hisCreditOverdueList.map((item, index) => {
									return (
										<View key={index} style={styles.stepLine}>
											<View style={styles.stepLeft}>
												<Text style={styles.stepText}>{item.updateTime && item.updateTime.substring(0, 10) || '-'}</Text>
												<Text style={styles.stepText}>{item.updateTime && item.updateTime.substring(11, 16) || '-'}</Text>
											</View>
											<View style={styles.stepMid}>
												<View style={styles.stepItem}>
													<View style={[styles.roundBox]}>
														<View style={styles.nrRound}></View>
													</View>
													<View style={styles.stepXian}></View>
												</View>
											</View>
											<View style={styles.stepRight}>
												<Text style={styles.stepText2}>{item.isOverdueName || '-'}{item.overdueStatus === '0' ? ((item.checkDay || '') + '天') : ''}({item.reasonName})</Text>
												<Text style={styles.stepText}>备注：{item.remark || '无'}</Text>
											</View>
										</View>
									)
								})
								: null
						}

					</View>
				</View>
				{
					this.state.loading ?
						<View style={{ position: 'absolute', height: GLOBAL.SCREEN_HEIGHT, width: GLOBAL.SCREEN_WIDTH, top: 0 }}>
							<PageStatusIndex status='loading' />
						</View>
						: null
				}
			</ScrollView>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F4F7FE',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
	},
	listBox: {
		width: 351 * scale,
		backgroundColor: style.color.white,
		borderRadius: 6 * scale,
		marginBottom: 18 * scale,
		marginTop: 21 * scale
	},
	listHead: {
		height: 65 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		marginBottom: 18 * scale,
		flexDirection: 'column',
		justifyContent: 'center'
	},
	title: {
		flex: 1,
		fontSize: 13 * scale,
		color: style.color.atrous,
		paddingLeft: 12 * scale
	},
	info: {
		paddingLeft: 12 * scale,
		fontSize: 12 * scale,
		color: '#848A96',
		marginTop: 4 * scale
	},
	btn: {
		color: '#0E7FFD',
		fontSize: 14 * scale,
		fontWeight: 'bold'
	},
	btnRed: {
		textAlign: 'right',
		fontSize: 10 * scale,
		color: '#D0021B'
	},
	timeBock: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		paddingBottom: 20 * scale,
	},
	timeBox: {
		width: 90 * scale
	},
	timeHead: {
		fontSize: 12 * scale,
		color: style.color.atrous,
		marginBottom: 4 * scale
	},
	timeDown: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold',
		marginTop: 4 * scale
	},
	itemList: {
		marginLeft: 10 * scale,
		marginRight: 10 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		paddingTop: 2 * scale,
		paddingBottom: 18 * scale,
	},
	total: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
		paddingRight: 10 * scale,
		height: 35 * scale,
		// lineHeight: 35 * scale
	},
	totalValue: {
		fontSize: 16 * scale,
		fontWeight: 'bold',
	},
	totalKey: {
		fontSize: 12 * scale,
		color: style.color.atrous
	},
	totalKey2: {
		fontSize: 12 * scale,
		color: '#D0021B',
		fontWeight: 'bold'
	},
	stepList: {
		paddingTop: 25 * scale,
		paddingLeft: 12 * scale
	},
	stepBox: {
		marginBottom: 7 * scale,
	},
	stepTitle: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold',
		paddingLeft: 12 * scale
	},
	stepLine: {
		height: 45 * scale,
		flexDirection: 'row'
	},
	stepLeft: {
		width: 60 * scale,
	},
	stepText: {
		fontSize: 10 * scale,
		color: '#848A96',
		marginTop: 2 * scale
	},
	stepText2: {
		fontSize: 12 * scale,
		color: style.color.atrous,
		marginRight: 10 * scale
	},
	stepRight: {
		width: 250 * scale,
	},
	stepMid: {
		width: 28 * scale,
	},
	stepItem: {
		width: 28 * scale,
		flexDirection: 'row',
		justifyContent: 'center'
	},
	roundBox: {
		width: 12 * scale,
		height: 12 * scale,
		borderRadius: 5 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		position: 'absolute',
		zIndex: 2
	},
	roundActive: {
		backgroundColor: '#0E7FFD',
		opacity: .5,
	},
	nrRound: {
		width: 6 * scale,
		height: 6 * scale,
		backgroundColor: '#0E7FFD',
		borderRadius: 3 * scale,
	},
	stepXian: {
		height: 39 * scale,
		width: 2 * scale,
		backgroundColor: '#D2D6DD',
		marginLeft: 5 * scale,
		zIndex: 0,
		position: 'absolute',
		top: 9 * scale
	},
	stepText3: {
		fontSize: 14 * scale,
		color: style.color.atrous
	},
	btnContainer: {
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'flex-end',
	},
	btnRed: {
		textAlign: 'right',
		fontSize: 10 * scale,
		color: '#D0021B',
		paddingRight: 4 * scale
	},
	actionBtn: {
		backgroundColor: style.color.themeColor,
		borderRadius: 6 * scale,
		paddingTop: 6 * scale,
		paddingBottom: 6 * scale,
		paddingLeft: 16 * scale,
		paddingRight: 16 * scale,
		marginRight: 8 * scale,
	},
	actionBtnText: {
		color: '#fff',
		fontSize: 12 * scale,
		fontWeight: '600'
	},
	closeBtn: {
		borderRadius: 6 * scale,
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		paddingLeft: 16 * scale,
		paddingRight: 16 * scale,
		borderColor: style.color.themeColor,
		borderWidth: 1
	},
	closeText: {
		color: style.color.themeColor,
		fontSize: 12 * scale,
		fontWeight: '600'
	},
})